<template>

    <el-row>
      <el-col :span="24">
        <gh />
      </el-col>
    </el-row>
    <div class="container">  <!-- 添加包裹容器 -->
    <el-row >
      <el-col :span="3">
        <el-row>
          <el-col :span="24">
            <userInfo />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <mu />
          </el-col>
        </el-row>
      </el-col>
      
      <el-col :span="21">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import gh from './components/GoHouse.vue'
import mu from './components/Menu.vue'
import userInfo from './components/UserInfo.vue'
</script>

<style scoped>
.container {
  /* 1. 背景图片：左侧绿色区域撑满，右侧白色与容器背景融合 */
  background-image: url('@/assets/images/backimage.png'); 
  background-size: auto 100%; /* 高度100%（撑满容器），宽度自动（保持比例） */
  background-position: left center; /* 水平靠左，垂直居中 */
  background-repeat: no-repeat; /* 禁止重复 */

  /* 2. 容器背景色：与图片右侧的白色一致，模拟“留白” */
  background-color: #ffffff; 

  /* 3. 确保容器至少占满屏幕高度 */
  min-height: 100vh; 
}

.el-row {
  margin-bottom: 15px;
}

</style>